<template>
	<view id="list">
		<u-sticky>
			<u-gap height="5" bgColor="#eee"></u-gap>
			<view class="search">
				<view class="search_main">
					<u-search placeholder="搜索项目名" v-model="queryParam.projectName"  @search="onSearch" @custom="onSearch"></u-search>
				</view>
			</view>
			<u-gap height="5" bgColor="#eee"></u-gap>
			<view class="list-filter">
				<view :class="queryParam.areaName == '' ? 'filter-item' : 'filter-item filter-item-blue'" @click="toSelector">
					{{ queryParam.areaName == '' ? '所属区域' : queryParam.areaName }}
					<u-icon name="arrow-down" size="12"></u-icon>
				</view>
				<view :class="queryParam.patrolType === '' ? 'filter-item' : 'filter-item filter-item-blue'" @click="showType = true">
					{{ queryParam.patrolName }}
					<u-icon v-if="showType" name="arrow-up" size="12"></u-icon>
					<u-icon v-else name="arrow-down" size="12"></u-icon>
				</view>
				<view :class="filterItemIcon ? 'filter-item filter-item-icon' : 'filter-item'">
					<u-icon :name="searchShow ? 'grid-fill' : 'grid'" size="20" @click="showSearch"></u-icon>
				</view>
				<!-- 				<view class="filter-item" @click="showRectify = true">
					{{ queryParam.isRectifyName == '' ? '是否整改' : queryParam.isRectifyName }}
					<u-icon v-if="showRectify" name="arrow-up" size="12"></u-icon>
					<u-icon v-else name="arrow-down" size="12"></u-icon>
				</view> -->
			</view>
			<u-gap height="5" bgColor="#eee"></u-gap>
			<view class="list-tabs">
				<view class="tab-item" :class="queryParam.myList == '' ? 'active' : ''" @click="onTab('')">所有</view>
				<view class="tab-item" :class="queryParam.myList == '0' ? 'active' : ''" @click="onTab('0')">我的</view>
				<view class="tab-item" :class="queryParam.myList == '1' ? 'active' : ''" @click="onTab('1')">我执行的</view>
				<view class="tab-item" :class="queryParam.myList == '2' ? 'active' : ''" @click="onTab('2')">抄送我的</view>
			</view>
			<u-gap height="5" bgColor="#eee"></u-gap>
		</u-sticky>
		<view class="list-wrap">
			<view class="my-list">
				<view class="my-list-item" v-for="(item, index) in patrolList" :key="item.id">
					<view class="fix-btn" v-if="item.isRectify == 1">
						<u-button size="mini" type="success" v-if="item.rectifySuccTime">已完结</u-button>
						<u-button size="mini" type="error" v-else>未完结</u-button>
					</view>
					<navigator :url="`../detail/detail?id=${item.id}`">
						<view class="list-item-title">
							<view>
								<text class="title-tit">检查人员：</text>
								<text class="title-txt">{{ item.checkPersonName }}</text>
							</view>
							<view>
								<text class="title-tit">检查类型：</text>
								<text v-if="item.type == 0" class="title-txt txt-b">日常巡检</text>
								<text v-if="item.type == 1" class="title-txt txt-w">专项检查</text>
							</view>
							<view>
								<text class="title-tit">项目名称：</text>
								<text class="title-txt">{{ item.projectName }}</text>
							</view>
							<view>
								<text class="title-tit">检查时间：</text>
								<text class="title-txt">{{ item.checkTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view>
								<text class="title-tit">所属区域：</text>
								<text class="title-txt">{{ item.areaName }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.rectifyDemand">
								<text class="title-tit">整改要求：</text>
								<text class="title-txt txt-r">{{ item.rectifyDemand }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.rectifyTime">
								<text class="title-tit">整改期限：</text>
								<text class="title-txt txt-r">{{ item.rectifyTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.rectifySuccTime">
								<text class="title-tit">整改时间：</text>
								<text class="title-txt txt-r">{{ item.rectifySuccTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view v-if="queryParam.type == 3 && item.rectifyResult">
								<text class="title-tit">整改回复：</text>
								<text class="title-txt">{{ item.rectifyResult }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.overseePersonName">
								<text class="title-tit">交办人：</text>
								<text class="title-txt">{{ item.overseePersonName }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.executePersonName">
								<text class="title-tit">执行人：</text>
								<text class="title-txt">{{ item.executePersonName }}</text>
							</view>
							<view v-if="queryParam.type == 4">
								<text class="title-tit">超期天数：</text>
								<text class="title-txt txt-r">{{ item.rectifyDay }}</text>
							</view>
							<view v-if="queryParam.type == 1">
								<text class="title-tit">备注：</text>
								<text class="title-txt" v-if="item.remark">{{ item.remark }}</text>
								<text class="title-txt" v-else>无</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<u-picker closeOnClickOverlay :show="showArea" :loading="cityLoading" ref="cityPicker" :columns="cityColumns"
			@change="onChangeCity" @cancel="onCityCancel" @close="onCloseCity" keyName="areaName"
			@confirm="onCityConfirm"></u-picker>
		<u-picker closeOnClickOverlay :show="showProblem" :columns="problemOpts" @confirm="onProConfirm"
			@cancel="onProCancel" @close="onClosePro" keyName="title"></u-picker>
		<u-picker closeOnClickOverlay :show="showRectify" :columns="rectifyOpts" @confirm="onRecConfirm"
			@cancel="onRecCancel" @close="onCloseRec" keyName="title"></u-picker>
		<u-picker closeOnClickOverlay :show="showType" :columns="typeOpts" @confirm="onTypeConfirm"
			@cancel="onTypeCancel" @close="onCloseType" keyName="title"></u-picker>
		<u-picker closeOnClickOverlay :show="showReport" :columns="reportLevOpts" @confirm="onRepConfirm"
			@cancel="onRepCancel" @close="onCloseRep" keyName="areaName"></u-picker>
		<u-popup :show="searchShow" mode="right" :round="10" @close="searchClose">
			<view class="search-wrap">
				<view class="search-item">
					<u-divider text="时间区间" textPosition="left"></u-divider>
					<view class="search-item-tags">
						<view class="search-item-tag">
							<uni-tag text="全部" :inverted="queryParam.cycleEnum != ''" type="primary" @click="isTime('')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="天" :inverted="queryParam.cycleEnum != 'TODAY'" type="primary" @click="isTime('TODAY')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="周" :inverted="queryParam.cycleEnum != 'WEEK'" type="primary" @click="isTime('WEEK')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="月" :inverted="queryParam.cycleEnum != 'MONTH'" type="primary" @click="isTime('MONTH')"></uni-tag>
						</view>
					</view>
				</view>
				<view v-if="queryParam.type != 2 && queryParam.type != 3" class="search-item">
					<u-divider text="是否交办" textPosition="left"></u-divider>
					<view class="search-item-tags">
						<view class="search-item-tag">
							<uni-tag text="全部" :inverted="queryParam.isJb != ''" type="primary" @click="isAss('')">
							</uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="是" type="primary" :inverted="queryParam.isJb != '1'" @click="isAss('1')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="否" type="primary" :inverted="queryParam.isJb != '0'" @click="isAss('0')"></uni-tag>
						</view>
					</view>
				</view>
				<view v-if="queryParam.type != 3" class="search-item">
					<u-divider text="是否完结" textPosition="left"></u-divider>
					<view class="search-item-tags">
						<view class="search-item-tag">
							<uni-tag text="全部" :inverted="queryParam.isEnd != ''" type="primary" @click="isEnd('')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="未完结" :inverted="queryParam.isEnd != '0'" type="primary" @click="isEnd('0')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="已完结" :inverted="queryParam.isEnd != '1'" type="primary" @click="isEnd('1')"></uni-tag>
						</view>
					</view>
				</view>
				<view v-if="queryParam.type != 2 && queryParam.type != 4 && queryParam.type != 3" class="search-item">
					<u-divider text="是否超期" textPosition="left"></u-divider>
					<view class="search-item-tags">
						<view class="search-item-tag">
							<uni-tag text="全部" :inverted="queryParam.isCq != ''" type="primary" @click="isStatus('')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="是" :inverted="queryParam.isCq != '1'" type="primary" @click="isStatus('1')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="否" :inverted="queryParam.isCq != '0'" type="primary" @click="isStatus('0')"></uni-tag>
						</view>
					</view>
				</view>
<!-- 				<view  v-if="queryParam.type == 3" class="search-item">
					<u-divider text="是否整改" textPosition="left"></u-divider>
					<view class="search-item-tags">
						<view class="search-item-tag">
							<uni-tag text="全部" type="primary"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="是" type="primary"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="否" type="primary"></uni-tag>
						</view>
					</view>
				</view> -->
			</view>
			<u-divider textPosition="left"></u-divider>
			<view class="search-btn">
				<view class="search-btn-item">
					<u-button type="primary" size="small" text="查询" @click="onSearch1"></u-button>
				</view>
				<view class="search-btn-item">
					<u-button type="warning" size="small" text="重置" @click="onReset"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getXjList
	} from '@/api/analysis'
	import {
		getAreaList
	} from '@/api/global'
	import config from '@/utils/defaultConfig'

	export default {
		data() {
			return {
				loadMore: false,
				queryParam: {
					status: '',
					areaId: '',
					areaName: '',
					cycleEnum: '',
					type: '',
					typeName: '',
					pageNum: 1,
					myList: '',
					patrolType: '',
					isCq: '',
					isJb: '',
					isEnd: '',
					patrolName: '巡检类型',
					reasonable: false,
					orderBy: 'id desc'
				},
				problemOpts: [
					config.isProblem
				],
				rectifyOpts: [
					config.isRectify
				],
				statusOpts: [
					config.status
				],
				typeOpts: [
					[
						{
							id: '',
							title: '巡检类型'
						},
						{
							id: 0,
							title: '日常巡检'
						},
						{
							id: 1,
							title: '专项检查'
						}
					]
				],
				problemLevOpts: [
					config.problemLevel
				],
				reportLevOpts: [],
				active: '',
				patrolList: [],
				showArea: false,
				cityColumns: [
					[],
					[]
				],
				cityLoading: false,
				areaList: [],
				showProblem: false,
				showRectify: false,
				showType: false,
				showReport: false,
				searchShow: false,
				searchForm: {},
				filterItemIcon: false
			}
		},
		onLoad(option) {
			for (const k in option) {
				this.queryParam[k] = option[k]
			}
			if (option.type == 2) {
				uni.setNavigationBarTitle({
					title: '督察交办'
				})
			} else if (option.type == 3) {
				uni.setNavigationBarTitle({
					title: '问题整改'
				})
			} else if (option.type == 4) {
				uni.setNavigationBarTitle({
					title: '超期整改'
				})
			}
		},
		onShow() {
			this.queryParam.myList = ''
			this.getPortal()
			this.getAreaList()
		},
		onReachBottom() {
			// this.loadMore = true
			this.queryParam.pageNum++
			this.getPortal()
		},
		onPullDownRefresh() {
			this.patrolList = []
			this.queryParam = {
				status: '',
				areaId: '',
				areaName: '',
				cycleEnum: '',
				type: '',
				typeName: '',
				pageNum: 1,
				myList: '',
				patrolType: '',
				isCq: '',
				isJb: '',
				isEnd: '',
				patrolName: '巡检类型',
				reasonable: false
			}
			this.getPortal()
			this.getAreaList()
			uni.stopPullDownRefresh()
		},
		methods: {
			getAreaList() {
				getAreaList().then(res => {
					this.areaList = res.data.data
					this.cityColumns[0] = this.areaList
					if (this.areaList[0].children.length == 0) {
						this.cityColumns[1] = this.areaList[0]
						this.reportLevOpts[0] = this.areaList[0]
					} else {
						this.cityColumns[1] = this.areaList[0].children
						this.reportLevOpts[0] = this.areaList[0].children
					}
				})
			},
			getPortal() {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				getXjList(this.queryParam).then(res => {
					const data = res.data.rows
					if (data.length > 0) {
						this.patrolList = this.patrolList.concat(res.data.rows)
					} else {
						uni.$u.toast('没有更多数据')
					}
					uni.hideLoading()
					// this.patrolList = res.data.rows
				}).catch(error => {
					uni.$u.toast(error)
					uni.hideLoading()
				})
			},
			onTab(active) {
				this.active = active
				this.queryParam.myList = this.active
				this.patrolList = []
				this.queryParam.pageNum = 1
				this.getPortal()
			},
			scrolltolower() {
				// this.loadMore = true
				// this.queryParam.pageNum++
				// this.getPortal()
				// this.loadMore = false
			},
			onCityConfirm(e) {
				if (e.value[0].children.length == 0) {
					this.queryParam.areaName = e.value[0].areaName
					this.queryParam.areaId = e.value[0].id
				} else {
					this.queryParam.areaName = e.value[1].areaName
					this.queryParam.areaId = e.value[1].id
				}
				this.showArea = false
				this.patrolList = []
				this.queryParam.pageNum = 1
				this.getPortal()
			},
			onChangeCity(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.cityPicker
				} = e
				if (columnIndex === 0) {
					this.cityLoading = true
					uni.$u.sleep(100).then(res => {
						picker.setColumnValues(1, this.areaList[e.index].children)
						this.reportLevOpts[0] = this.areaList[e.index].children
						this.cityLoading = false
					})
				}
			},
			toDetail(id) {
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				})
			},
			onCityCancel() {
				this.showArea = false
			},
			onProCancel() {
				this.showProblem = false
			},
			onCloseCity(e) {
				this.showArea = false
			},
			onClosePro() {
				this.showProblem = false
			},
			onRecCancel() {
				this.showRectify = false
			},
			onCloseRec() {
				this.showRectify = false
			},
			onCloseType() {
				this.showType = false
			},
			onTypeCancel() {
				this.showType = false
			},
			onRepCancel() {
				this.showReport = false
			},
			onCloseRep() {
				this.showReport = false
			},
			onProConfirm(e) {
				this.queryParam.isProblem = e.value[0].id
				this.queryParam.isProblemName = e.value[0].title
				this.showProblem = false
				this.patrolList = []
				this.queryParam.pageNum = 1
				this.getPortal()
			},
			onTypeConfirm(e) {
				this.queryParam.patrolType = e.value[0].id
				this.queryParam.patrolName = e.value[0].title
				this.showType = false
				this.patrolList = []
				this.queryParam.pageNum = 1
				this.getPortal()
			},
			onRecConfirm(e) {
				this.queryParam.isRectify = e.value[0].id
				this.queryParam.isRectifyName = e.value[0].title
				this.showRectify = false
				this.patrolList = []
				this.queryParam.pageNum = 1
				this.getPortal()
			},
			onRepConfirm(e) {
				this.queryParam.reportAreaId = e.value[0].id
				this.queryParam.reportAreaName = e.value[0].areaName
				this.showReport = false
				this.patrolList = []
				this.queryParam.pageNum = 1
				this.getPortal()
			},
			toAdd() {
				uni.navigateTo({
					url: '/packageB/form/add'
				})
			},
			onSearch() {
				this.getPortal()
			},
			onSearch1() {
				this.patrolList = []
				this.queryParam.pageNum = 1
				this.getPortal()
				this.searchShow = false
				if (this.queryParam.isCq != '' || this.queryParam.isEnd != '' || this.queryParam.status != '' || this.queryParam.patrolType != '' || this.queryParam.type != '' || this.queryParam.isJb != '') {
					this.filterItemIcon = true
				} else{
					this.filterItemIcon = false
				}
				// isRectify  status  isType type
			},
			onReset() {
				this.queryParam.areaId = ''
				this.queryParam.areaName = ''
				this.queryParam.cycleEnum = ''
				this.queryParam.patrolType = ''
				this.queryParam.patrolName = '巡检类型'
				this.queryParam.pageNum = 1
				this.queryParam.myList = ''
				this.queryParam.isEnd = ''
				this.queryParam.isCq = ''
				this.queryParam.isJb = ''
				this.searchShow = false
				this.filterItemIcon = false
				this.getPortal()
			},
			toSelector () {
				const current = getCurrentPages()
				const url = current[current.length - 1].route
				this.queryParam.url = url
				let params = ''
				for (const k in this.queryParam) {
					params += `${k}=${this.queryParam[k]}&`
				}
				uni.navigateTo({
					url: '/packageB/selector/select-area?' + params
				})
			},
			showSearch() {
				this.searchShow = !this.searchShow
			},
			searchClose() {
				this.searchShow = false
			},
			isRec(value) {
				this.queryParam.isRectify = value
			},
			isEnd(value) {
				this.queryParam.isEnd = value
			},
			isType(value) {
				this.queryParam.type = value
			},
			isAss(value) {
				this.queryParam.isJb = value
			},
			isZx(value) {
				this.queryParam.isType = value
			},
			isTime (value) {
				this.queryParam.cycleEnum = value
			},
			isStatus (value) {
				this.queryParam.isCq = value
			}
		}
	}
</script>

<style lang="scss">
	#list {
		font-size: 24upx;
		padding-bottom: 100upx;
		min-height: 100vh;
		background: #eee;
		.search {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			.search_main {
				width: 100%;
			}
		}
		.my-list {
			background-color: #eee;
			padding: 20upx;
			.my-list-item {
				position: relative;
				background: #fff;
				padding: 20upx;
				margin-bottom: 20upx;
				box-shadow: 0 2px 3px #ccc;
				border-radius: 8upx;
				.fix-btn {
					position: absolute;
					right: 10upx;
					bottom: 10upx;
					width: 100upx;
				}
				.list-time {
					position: absolute;
					right: 20upx;
					top: 20upx;
					height: 40upx;
					line-height: 40upx;
					color: #fff;
					.list-time-in {
						width: 100%;
					}
					.rectified, .not-rectified {
						padding: 0 18upx;
						border-radius: 4upx;
					}
					.rectified {
						background-color: #4491fd;
					}
					.not-rectified {
						background-color: #f8695f;
					}
				}
			}
		}
		.list-tabs {
			display: flex;
			flex-direction: row;
			background: #fff;

			.tab-item {
				padding: 15upx 0;
				text-align: center;
				flex-grow: 1;
				font-weight: bold;
			}

			.tab-item.active {
				border-bottom: 2px solid $uni-color-primary;
			}
		}

		.list-filter {
			display: flex;
			flex-direction: row;
			padding: 0 15upx;
			background: #fff;

			.filter-item {
				flex-grow: 1;
				padding: 20upx 0;
				display: flex;
				font-size: 24upx;
				justify-content: center;
				font-weight: bold;
			}
			.filter-item-blue {
				color: $uni-color-primary;
			}
		}

		.list-wrap {
			padding-bottom: 100upx;

			.list-item-title {
				line-height: 52upx;
				.title-tit {
					font-weight: bold;
				}
				.txt-b {
					color: $u-primary;
				}
				.txt-w {
					color: $u-warning;
				}
				.txt-r {
					color: $u-error;
				}
			}

			.list-content {
				padding: 15upx;

				text {
					word-wrap: break-word;
				}
			}

			.list-tags {
				white-space: nowrap;
				width: 100%;
				height: 60upx;
				// border-top: 1px solid $u-light-color;
				// padding:10upx;
				.tag-item {
					margin-right: 5upx;
				}
			}
		}

		.search-wrap {
			padding: 20upx;

			.search-item-tags {
				display: flex;

				.search-item-tag {
					margin-right: 10upx;
				}
			}
		}

		.search-btn {
			padding: 0 20upx 25upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-btn-item {
				width: 45%;
			}

			.search-btn-item:first-child {
				padding-right: 20upx;
			}

			.search-btn-item:last-child {
				padding-left: 20upx;
			}
		}

		.submit-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			background-color: #ffffff;
			height: 100upx;
			.btn-add {
				display: block;
				width: 40%;
				height: 72upx;
				line-height: 72upx;
				background-color: #55aaff;
				margin: 18upx auto;
				border-radius: 40upx;
				text-align: center;
				font-size: 32upx;
				color: #fff;
				background-image: linear-gradient(to right, #2595f9, #1eb8ee);
				box-shadow: 0 1px 4px 0px rgba(30,184,238,0.3);
			}
		}
	}

	.filter-item-icon .u-icon__icon {
		color: $uni-color-primary !important;
	}
</style>
